<template>
  <view>
    <div class="container">
      <div style="height: 10px"></div>
      <view class="all">
        <div v-show="list.length == 0">
          <u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png">
          </u-empty>
        </div>
        <div class="card" v-for="item in list">
          <div style="height: 10px"></div>
          <div class="card-top">
            <div style=" text-align: center;font-size: 18px;font-weight: 500;">{{ item.workOrderNo }}</div>
            <!-- <div :class="item.workOrderType == 1 ? 'right' : 'right1'"
                style="width: 20%; text-align: center;border-radius: 4px;">
                {{ item.workOrderType == 1 ? "手工单" : "自派单" }}

              </div> -->
            <div style="width: 20%; text-align: center;border-radius: 4px;">
              <image style="width: 110rpx;height: 60rpx;"
                :src="item.workOrderType == 1 ? 'https://28-1325662301.cos.ap-shanghai.myqcloud.com/%E9%9D%92%E5%B2%9B%E5%B0%8F%E7%A8%8B%E5%BA%8F%2FGroup%202371.png' : 'https://28-1325662301.cos.ap-shanghai.myqcloud.com/%E9%9D%92%E5%B2%9B%E5%B0%8F%E7%A8%8B%E5%BA%8F%2FGroup%202370.png'" />
            </div>
          </div>
          <div style="height: 10px"></div>
          <u-line color="#83AF92"></u-line>
          <div style="height: 15px;"></div>
          <div class="newFlex">
            <div>发单日期</div>
            <div>{{ item.launchTime }}</div>
          </div>
          <div style="height: 15px;"></div>
          <div class="newFlex">
            <div>有机质类型</div>
            <div>{{ item.vehicleOrganicType }}</div>
          </div>
          <div style="height: 15px;"></div>
          <div class="newFlex">
            <div>车牌号码</div>
            <div>{{ item.licenseNumber }}</div>
          </div>
          <div style="height: 15px;"></div>
          <div v-for="items in item.workOrderDetailVOList">
            <div class="newFlex">
              <div>收运点</div>
              <div>{{ items.farmName }}</div>
            </div>
          </div>
          <div style="height: 20px;"></div>
          <div class="lookBtn" v-if="flag == '进行中任务'" @click="taskDetail(item)">查看</div>
          <div class="lookBtn" v-if="flag == '待接单任务'" @click="taking(item)">接单</div>
          <div style="height: 15px;"></div>
          <!-- <div class="table">
              <div v-for="items in item.workOrderDetailVOList">
                <div
                  style="display: flex;align-items: center;justify-content: space-between;margin: 0 0 10px 0;font-size: 14px;">
                  <div>收运点：{{ items.farmName }}</div>
                  <div>
                    <text>{{ items.completionTime }}</text>
                    <text>{{ items.workOrderDetailState == 0 ? "待收运" : items.workOrderDetailState == 1 ? '已完成' : '报停中'
                      }}</text>
                  </div>
                </div>
              </div>
            </div> -->
          <!-- <u-line color="#83AF92"></u-line>
            <div style="height: 10px"></div>
            <div :class="item.workOrderState == 5 ? 'status1' : item.workOrderState == 2 ? 'statusDone' : 'status'">
              {{ item.workOrderState == 0 ? "待派单" : item.workOrderState == 1 ? "进行中"
                : item.workOrderState == 2 ? '已完成' : item.workOrderState == 3 ?
                  '待接单' : item.workOrderState == 4 ? "未到收运点" : item.workOrderState == 5 ? '已收集返回中' : item.workOrderState ==
                    6 ?
                    '报停中' : '暂无' }}
            </div> -->
        </div>
        <div style="height: 10px;"></div>
      </view>
    </div>
  </view>
</template>
<script>
import { taskList, taking } from '../api/api';
export default {
  data() {
    return {
      list: [],
      currentPage: '',
      role: '',
      indent: '',
      flag: ''
    };
  },
  methods: {
    taskDetail(item) {
      uni.setStorageSync('driverTaskDetail', item)
      uni.navigateTo({ url: '/pagesDriver/system/questDetail' })
    },
    //接单
    taking(e) {
      uni.showModal({
        title: '提示',
        content: '确认要接单吗',
        showCancel: true,
        success: ({ confirm, cancel }) => {
          if (confirm) {
            taking({
              id: e.id
            }).then(res => {
              console.log(res.data);
              if (res.data.code == 200) {
                uni.showToast({
                  title: res.data.msg,
                  icon: 'success',
                  mask: true
                })
                uni.setStorageSync("state", true);
                uni.navigateBack({ delta: 1 })
              } else {
                uni.showToast({
                  title: res.data.msg,
                  icon: 'none',
                  mask: true
                })
              }
            })
          }
        }
      })

    },
  },
  onLoad(options) {
    console.log(options);
    this.flag = options.flag;
    if (options.flag == '进行中任务') {
      uni.setNavigationBarTitle({
        title: '进行中任务'
      });
      taskList({ workOrderDetailState: '' }).then(res => {
        console.log(res.data, '列表');
        if (res.data.code == 200) {
          this.list = res.data.data.filter((item) => item.workOrderState == 4);
          console.log(this.list, 'list1');
        }
      })
      //workOrderState2为已完成
    } else if (options.flag == '待接单任务') {
      uni.setNavigationBarTitle({
        title: '待接单任务'
      });
      taskList({ workOrderDetailState: '' }).then(res => {
        console.log(res.data, '列表');
        if (res.data.code == 200) {
          this.list = res.data.data.filter((item) => item.workOrderState == 3);
          console.log(this.list, 'list1');
        }
      })
    } else {
      uni.setNavigationBarTitle({
        title: '历史记录'
      });
      taskList({ workOrderDetailState: '' }).then(res => {
        console.log(res.data, '列表');
        if (res.data.code == 200) {
          this.list = res.data.data.filter((item) => item.workOrderState == 2);
          console.log(this.list, 'list1');
        }
      })
    }
  },
  onShow() {

  },
};
</script>
<style lang="scss">
.container {
  height: 100vh;
  width: 100vw;
  background: #f3f3f3;
  color: #000000;
  overflow-y: scroll;
}

.head-nav {
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.activite {
  border-bottom: 2px solid #1a512c;
}

.card {
  width: 95%;
  margin-left: 2.5%;
  margin-top: 10px;
  border-radius: 10px;
  background: #ffffff;

  .card-top {
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 90%;
    margin-left: 5%;
  }
}

.newFlex {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 90%;
  margin-left: 5%;
}

.items {
  display: flex;
  align-items: center;
  width: 90%;
  margin-left: 5%;
  justify-content: space-between;
  font-size: 14px;
}

.table {
  width: 90%;
  margin-left: 5%;
}

.status {
  color: #fff;
  background: #1b9c46;
  width: 90%;
  margin-left: 5%;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  border-radius: 3px;
}

.status1 {
  color: #1a512c;
  background: #FDBD18;
  width: 90%;
  margin-left: 5%;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  border-radius: 3px;
}

.right {
  background: #FDBD18;
  color: #fff;

}

.right1 {
  background: #50AB18;
  color: #fff;
}

.statusDone {
  color: #fff;
  background: #70a182;
  width: 90%;
  margin-left: 5%;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  border-radius: 3px;
}


.lookBtn {
  width: 90%;
  margin-left: 5%;
  background: #000000;
  color: #fff;
  border-radius: 6px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
